<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!--            搜索条件-->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="数据源">
                <a-select
                        v-model="dsName"
                        placeholder="请选择"

                >
                  <a-select-option key="master" value="master">master</a-select-option>
                  <a-select-option :value="dbData.value" v-for="dbData in dbSelectData" :key="dbData.name">{{dbData.name}}</a-select-option>

                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="名称">
                <a-input v-model="queryParam.tableName" placeholder="" />
              </a-form-item>
            </a-col>
            <a-button type="primary" @click="$refs.table.refresh(true)"
            >查询</a-button
            >
            <a-button
                    style="margin-left: 8px"
                    @click="() => (this.queryParam = {})"
            >重置</a-button
            >


          </a-row>
        </a-form>
      </div>

      <div class="table-operator">


        <a-button type="primary" icon="download" @click="handleMultipartGen">批量生成</a-button>
      </div>
      <!-- 表格数据-->
      <s-table
              ref="table"
              size="default"
              :rowKey="rowKey"
              :columns="columns"
              :data="loadData"
              :rowSelection="rowSelection"
              showPagination="auto"
      >



        <span slot="action" slot-scope="text, record">
          <template>


            <a @click="preGenCode(record)">生成</a>

          </template>
        </span>
      </s-table>
      <!--新建表单-->
      <generate-model
              ref="generateModel"
              :visible="visible"
              :model="mdl"
              @cancel="closeGenFormModel()"
              @ok="generateCode"
      />


    </a-card>
  </page-header-wrapper>
</template>

<script>
  import moment from 'moment'
  import {Ellipsis, STable} from '@/components'
  import {getDbSelectData, getTableList} from '@/api/gen'


  import GenerateModel from './GenerateModel'



  const columns = [
    {
      title: '表名称',
      dataIndex: 'tableName',
    },
    {
      title: '存储引擎',
      dataIndex: 'engine',
    },
    {
      title: '表备注',
      dataIndex: 'tableComment',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      sorter: true
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' },
    },
  ]



  export default {
    name: 'Gen',
    components: {
      STable,
      Ellipsis,
      GenerateModel,
    },
    data() {
      this.columns = columns
      return {
        rowKey: 'tableName',
        // create model
        visible: false,
        mdl: null,
        // 查询参数
        queryParam: {

        },
        dsName: 'test-5',
        dbSelectData: [],
        // 加载数据方法 必须为 Promise 对象
        loadData: (parameter) => {
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          console.log('loadData request parameters:', requestParameters)
          return getTableList(this.dsName,requestParameters).then((res) => {
            return res.data
          })
        },
        selectedRowKeys: [],
        selectedRows: [],

      }
    },
    created() {
      getDbSelectData().then(res=>{
        console.log(res)
        this.dbSelectData=res.data;
      })
    },
    watch:{
        dsName(){
          this.$refs.table.refresh()
        }
    },
    computed:{
      rowSelection () {
        return {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      }
    },
    methods: {
      handleMultipartGen(){
        let tableNames=this.selectedRowKeys;
        console.log(tableNames)
        if (tableNames&&tableNames.length>0){
          console.log(this.dsName)
          this.mdl={}
          this.mdl.dsName=this.dsName;
          this.mdl.tableNames=tableNames;
          this.visible = true
          console.log(this.mdl)
          //this.mdl = { ...record }
          this.$refs.generateModel.editOptions({title:'批量生成代码',action:'multipart-generate'})
        }else{
          this.$message.error("请至少选择一项")
        }
      },
      //生成代码
      preGenCode(record) {
        this.visible = true
        this.mdl = { ...record }
        this.mdl.dsName=this.dsName;
        this.mdl.tableNames=[record.tableName]
        this.$refs.generateModel.editOptions({title:'生成代码',action:'generate'})

      },
      generateCode(action){

        const form=this.$refs.generateModel.form;
        form.validateFields((errors, values) => {
          if (!errors){
            //判断是多生成还是单生成
            console.log(values)
            if (action===this.SYS_CONST.GENERATE_CODE.GENERATE){
              //单生成
              console.log("我是单文件生成")
            }else{
              //多生成
              console.log("我是多文件生成")
            }

          }else{
            this.$message.error("please check yours param")
          }
        })
      },


      closeGenFormModel(){
        this.visible = false
        const form = this.$refs.generateModel.form
        form.resetFields() // 清理表单数据（可不做）

      },

      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },


      resetSearchForm() {
        this.queryParam = {
          date: moment(new Date()),
        }
        console.log(this.queryParam)
      },


    },
  }
</script>
